<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else class="">
		<swiper :indicator-dots="true" :autoplay="autoplay" :interval="3000" :duration="1000" @change="swiperChange"
			@click="autoplay = false">
			<swiper-item v-for="(item, index) in restoreImg(details_list.Images)" :key="index">
				<view class="swiper-item" @click="previewImage(item)">
					<image class="head_img" :src="item" mode="aspectFill"></image>
				</view>
				<!-- <video v-else ref="video" id="video" class="head_img" x5-video-player-type="h5"
					x5-video-player-fullscreen="true" object-fit="cover" preload :src="item.Url"></video> -->
			</swiper-item>
		</swiper>

		<!-- 商品名称 -->
		<view class="goods_name flex">
			<view class="namebox">
				<view class="flex">
					<view class="name d2">{{ details_list.ProductName }}</view>
				</view>
				<view class="price" v-if="details_list.Price != 0 && details_list.Score != 0">
					挥豆：{{ details_list.Score }}+
					<view class="now_price cprice">
						<text style="font-size: 28rpx; margin-right: -6rpx; color: #e71b00; font-weight: 600">￥</text>
						{{ details_list.Price }}
					</view>
				</view>
				<view class="price2" v-else-if="details_list.Price == 0">
					<view class="now_price cprice">
						<text style="font-size: 24rpx; color: #e71b00; font-weight: 600">挥豆：</text>
						{{ details_list.Score }}
					</view>
					<view class="now_price2 cprice">
						<text style="font-size: 24rpx; color: #9c9594; font-weight: 600">我的挥豆：</text>
						{{ userScore }}
					</view>
				</view>
				<view class="price" v-else-if="details_list.Score == 0">
					<view class="now_price cprice">
						<text style="font-size: 28rpx; margin-right: -6rpx; color: #e71b00; font-weight: 600">￥</text>
						{{ details_list.Price }}
					</view>
				</view>
			</view>
		</view>
		<view class="box3">
			<view class="tit">商品详情</view>
			<view class="content" v-if="details_list.Description">
				<image v-for="(item, index) in jsonStringImg(details_list.Description)" :key="index" :src="item.img"
					mode="widthFix">
				</image>
				<!-- <rich-text preview :nodes="details_list.Description" @itemclick="itemclick"></rich-text> -->
			</view>
			<view class="null" v-else>暂无详情信息</view>
		</view>
		<!-- <view style="height: 160rpx;background-color: #1C1C1C;">
		</view> -->
		<view style="height: 150rpx"></view>
		<view class="bottom">
			<view class="moneny" v-if="details_list.Score == 0">
				<view class="textbox">
					<text style="margin-right: -6rpx">￥</text>
					<text>{{ details_list.Price }}</text>
				</view>
				<view class="cart_btn" @click="openPayBox(0)">
					<image class="cart_img"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327765698301334.png"></image>
					<view class="cart_text">购物车</view>
					<view class="cir_icon" v-if="shoplength > 0">{{ shoplength }}</view>
				</view>
				<view class="bottom_btn" @click="$refs.pay.open()">立即购买</view>
			</view>
			<view class="moneny" v-else-if="details_list.Price == 0">
				<view>
					<text>挥豆：</text>
					<text>{{ details_list.Score }}</text>
				</view>
				<view class="cart_btn" @click="openPayBox(0)">
					<image class="cart_img"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327765698301334.png"></image>
					<view class="cart_text">购物车</view>
					<view class="cir_icon" v-if="shoplength > 0">{{ shoplength }}</view>
				</view>
				<view class="bottom_btn" v-if="details_list.Score > userScore">挥豆不足</view>
				<view class="bottom_btn" v-else @click="openPayBox(1)">立即兑换</view>
				<!-- <view class="bottom_btn">积分不足</view> -->
			</view>
			<view class="moneny" v-else-if="details_list.Price != 0 && details_list.Score != 0">
				<view style="display: flex; align-items: center;width: 100%;">
					<view class="integral">挥豆:{{ details_list.Score }}+</view>
					<view class="integral">￥{{ details_list.Price }}</view>
					<view class="cart_btn" @click="openPayBox(0)">
						<image class="cart_img"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327765698301334.png"></image>
						<view class="cart_text">购物车</view>
						<view class="cir_icon" v-if="shoplength > 0">{{ shoplength }}</view>
					</view>
					<view class="bottom_btn" @click="openPayBox(1)">立即购买</view>
				</view>
			</view>
		</view>
		<uni-popup type="bottom" ref="pay">
			<view ref="hands">
				<view class="store">
					<view @click="$refs.pay.close()" class="staff_card_cont">
						<uni-icons type="closeempty" size="24" style="opacity: 0"></uni-icons>
						商品信息
						<uni-icons type="closeempty" size="24"></uni-icons>
					</view>
					<block v-if="details_list.Type != 0">
						<view class="staff_card_cont" v-if="!params.Delivery_Address"
							@tap="nav_to('/pages/dynamic/Address')">
							<text>添加收货地址</text>
							<uni-icons type="forward" color="rgba(127, 130, 141, 1)" size="24"
								style="margin-right: -14rpx"></uni-icons>
						</view>
						<view v-if="params.Delivery_Address" class="staff_card_cont"
							@tap="nav_to('/pages/dynamic/Address')">
							<view class="Accepter">
								<view class="content_text">
									<view class="lit">{{ params.Delivery_Accepter }}&nbsp;&nbsp;{{ params.Delivery_Phone
										}}
									</view>
									<view class="lit address">
										{{ params.Delivery_Address }}
									</view>
								</view>
								<uni-icons type="forward" color="rgba(127, 130, 141, 1)" size="24"
									style="margin-right: -14rpx"></uni-icons>
							</view>
						</view>
					</block>
					<scroll-view scroll-y>
						<view class="staff_card_cont">
							<view>商品名称</view>
							<view class="content">{{ details_list.ProductName }}</view>
						</view>
						<view class="list-body"
							v-if="Array.isArray(details_list.ProductStyleList) && details_list.ProductStyleList.length">
							<view class="list-group" :class="checkIndex == i ? 'list-active' : ''"
								v-for="(el, i) in details_list.ProductStyleList" :key="i" @click="checkFun(i)">
								{{ el.Style }}
								<text>￥{{ el.Price }}</text>
							</view>
						</view>
						<view class="staff_card_cont" style="padding-right: 28rpx">
							<view>购买数量</view>
							<view v-if="details_list.Style != '券' && details_list.Style != '场'" class="countbox">
								<uni-icons v-if="params.Qty == 1" type="minus" size="30" color="#ccc"></uni-icons>
								<uni-icons @click="params.Qty -= 1" v-else type="minus" size="30"></uni-icons>
								<input type="number" v-model="params.Qty" placeholder="数量" />
								<uni-icons v-if="params.Qty < details_list.ProductStyleList[checkIndex].Stock"
									@click="params.Qty += 1" type="plus" size="30"></uni-icons>
								<uni-icons v-else type="plus" size="30" color="#ccc"></uni-icons>
							</view>
							<view v-else class="countbox">
								<text>1</text>
							</view>
						</view>
						<view class="staff_card_cont">
							<view>商品库存</view>
							<view class="content">
								<text style="color: #333">{{ details_list.ProductStyleList[checkIndex].Stock }}</text>
							</view>
						</view>
						<view class="staff_card_cont"
							v-if="(Array.isArray(details_list.ProductStyleList) && !details_list.ProductStyleList.length) || !details_list.ProductStyleList">
							<view>商品单价</view>
							<view class="content" style="color: #e71b00">
								<text v-if="details_list.Price">￥{{ details_list.Price }}</text>
								<text v-if="details_list.Price != 0 && details_list.Score != 0">+</text>
								<text v-if="details_list.Score">挥豆：{{ details_list.Score }}</text>
							</view>
						</view>
						<view class="staff_card_cont" v-else>
							<view>商品单价</view>
							<view class="content" style="color: #e71b00">
								<text v-if="details_list.ProductStyleList[checkIndex].Price">￥{{
									details_list.ProductStyleList[checkIndex].Price }}</text>
								<text
									v-if="details_list.ProductStyleList[checkIndex].Price != 0 && details_list.ProductStyleList[checkIndex].Score != 0">+</text>
								<text v-if="details_list.ProductStyleList[checkIndex].Score">挥豆：{{
									details_list.ProductStyleList[checkIndex].Score }}</text>
								<!-- <text>￥{{ details_list.ProductStyleList[checkIndex].Price }}</text> -->
							</view>
						</view>

						<!-- <view class="staff_card_cont" v-if="(Array.isArray(details_list.ProductStyleList) && !details_list.ProductStyleList.length) || !details_list.ProductStyleList">
							<view>当前积分</view>
							<view class="content" style="color: #e71b00">
								<text>积分:{{ totalScore }}</text>
							</view>
						</view> -->
					</scroll-view>

					<!-- <view class="staff_card_cont">
						<view>总价</view>
						<view class="content" style="color: #e71b00">
							<text v-if="details_list.Price">￥{{ totalPrice }}</text>
							<text v-if="details_list.Price != 0 && details_list.Score != 0">+</text>
							<text v-if="details_list.Score">积分:{{ totalPV }}</text>
						</view>
					</view> -->
					<view class="cont_sub" style="background-color: #f39931;" v-if="isCart == 0" @click="cart_add">
						加入购物车
						<text v-if="details_list.Price">￥{{ totalPrice }}</text>
						<text v-if="details_list.Price != 0 && totalPV != 0">+</text>
						<text v-if="totalPV > 0">{{ totalPV }}挥豆</text>
					</view>
					<view class="cont_sub" v-if="isCart == 1" @click="giftEvent">
						{{ details_list.Score ? '立即选购' : '立即选购' }}
						<text v-if="details_list.Price">￥{{ totalPrice }}</text>
						<text v-if="details_list.Price != 0 && totalPV != 0">+</text>
						<text v-if="totalPV > 0">{{ totalPV | convertUnits }}挥豆</text>
					</view>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			id: '',
			autoplay: true,
			details_list: {},
			count: 1, //商品数量
			userScore: 0,
			flag: false,
			type: '商品购买',

			params: {
				Delivery_Address: '', //  收货地址
				Delivery_Accepter: '', //  收货人
				Delivery_Phone: '', //  联系电话
				Qty: 1, //  数量
			},
			imgArr: [],
			checkIndex: 0,
			isCart: 1,
			shoplength: 0,
			// totalScore:0
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.get_detail();
		this.getSaleChannelDetail();
		this.MyDefaultAddress();
		this.getView()
	},
	onShow() {
		this.MyCart()
		this.MyDefaultAddress();
	},
	filters: {
		convertUnits(value) {
			if (!value) return '';
			let num = Number(value)
			if (num >= 10000) {
				return (num / 10000).toFixed(1) + '万';
			} else if (num >= 1000) {
				return (num / 1000).toFixed(1) + '千';
			} else {
				return num.toString();
			}
		}
	},


	computed: {
		totalPV() {
			let score = 0
			if (Array.isArray(this.details_list.ProductStyleList) && this.details_list.ProductStyleList.length) {
				score = this.details_list.ProductStyleList[this.checkIndex].Score
			}
			return (this.params.Qty * score)
		},
		totalPrice() {
			if (Array.isArray(this.details_list.ProductStyleList) && this.details_list.ProductStyleList.length) {
				return (this.params.Qty * this.details_list.ProductStyleList[this.checkIndex].Price).toFixed(2);
			} else return (this.params.Qty * this.details_list.Price).toFixed(2);
		},
	},
	watch: {
		'params.Qty': {
			handler(val) {
				if (val <= 0 || !val) {
					this.$nextTick(() => {
						this.params.Qty = 1;
					});
					this.$pv.msg('数量低于1');
				}
			},
		},
	},
	methods: {
		async MyCart() {
			let res = await this.$api.post('ShopCart/MyCart', {
			})
			if (res.code == 0) {
				// this.shoplength = res.data.length
				for (let i = 0; i < res.data.length; i++) {
					for (let j = 0; j < res.data[i].Item.length; j++) {
						this.shoplength += 1
					}

				}
			}
		},
		openPayBox(e = 0) {
			this.isCart = e
			this.$refs.pay.open()
		},
		jsonStringImg(str) {
			const list = str ? str.split(',').map((image) => ({
				img: image.trim(),
			})) : [];
			console.log(list, 'll');

			return list
		},
		getView() {
			this.$api.post('/Common/Add_ViewPath', {
				Path: 'mall_detail',
				Platform: uni.getStorageSync('platform')
			})

		},
		async getSaleChannelDetail() {
			let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
				CompanyID: 6002,
			});
			let data = res.data;
			this.userScore = data.Score;
			// this.totalScore = res.data?.Score;
		},
		async MyDefaultAddress() {
			let res = await this.$api.post('/UserAddress/MyDefaultAddress');
			let data = res.data;
			if (!data) {
				Object.keys(this.params).forEach((key) => {
					this.params[key] = key == 'Qty' ? 1 : '';
				});
				return;
			}
			this.params.Delivery_Accepter = data.Accepter;
			this.params.Delivery_Phone = data.Phone;
			this.params.Delivery_Address = data.Address;
		},
		checkFun(i) {
			this.checkIndex = i
		},
		//支付
		async giftEvent() {
			// if (this.totalPV > 0) {
			// 	if (this.userScore < this.totalPV) {
			// 		this.$pv.msg('挥豆不足');
			// 		return
			// 	}
			// }

			if (this.details_list.Type != 0) {
				if (!this.params.Delivery_Address) return this.$pv.msg('请选择默认收货地址');
			}

			let l;
			if (Array.isArray(this.details_list.ProductStyleList) && this.details_list.ProductStyleList.length) {
				let con = this.details_list.ProductStyleList[this.checkIndex];
				l = [
					{
						productID: this.details_list.ID,
						Name: this.details_list.ProductName,
						Price: con.Price,
						score: this.totalPV,
						Style: con.Style,
						Qty: this.params.Qty,
					},
				];
			} else {
				l = [
					{
						productID: this.details_list.ID,
						Name: this.details_list.ProductName,
						Price: this.details_list.Price,
						score: this.totalPV,
						Style: this.details_list.Style,
						Qty: this.params.Qty,
					},
				];
			}
			if (this.totalPV > 0) {
				this.type = '积分兑换';
			}
			let sub = await this.$api.post('/Order/Submit', {
				Price: this.totalPrice,
				Score: this.totalPV,
				Delivery_Address: this.params.Delivery_Address,
				Delivery_Accepter: this.params.Delivery_Accepter,
				Delivery_Phone: this.params.Delivery_Phone,
				CouponNo: '',
				Discounts: '',
				ItemStr: JSON.stringify(l),
				ProductID: this.details_list.ID,
				ProductName: this.details_list.ProductName,
				Qty: this.params.Qty,
				Style: this.details_list.Style,
				OrderType: '兑换订单',
				// #ifdef MP-WEIXIN
				PayChannel: 'weixin',
				// #endif
				// #ifdef APP
				PayChannel: 'app',
				// #endif
			});
			console.log(sub);
			if (!sub.data) return this.$pv.msg(sub.message)
			if (this.details_list.Type != 0) {
				this.type = '虚拟商品购买';
			}
			if (this.totalPV > 0) {
				this.type = '积分兑换';
			}
			const payData = (typeof sub.data === 'number' && !isNaN(sub.data)) ? {
				total_fee: this.totalPrice,
				score: this.totalPV,
				EventType: '兑换商品',
				EventID: sub.data,
				body: '商品兑换',
			} : sub.data
			let pres = await this.$api.post('Payment/PayV2', {
				// total_fee: this.totalPrice,
				// score: this.totalPV,
				// EventType: '兑换商品',
				// EventID: sub.data,
				...payData,
				// body: l[0].Name,
				SourcePage: 'detail',
				// #ifdef MP-WEIXIN
				PayChannel: '微信支付',
				// #endif
				// #ifdef APP
				PayChannel: 'app',
				// #endif
			});
			console.log('--=-----');
			console.log(pres);
			if (!pres.data) return this.$pv.msg(pres.message)
			// 已余额支付成功
			if (pres.code == 0) {
				// 支付成功返回的内容
				// 调用uni支付API
				let payObj = JSON.parse(pres.data);
				let _this = this;
				console.log('支付');
				console.log(payObj);
				if (this.totalPrice == 0) {
					if (payObj) {
						_this.$pv.msg('购买成功');
						_this.$refs.pay.close();
						_this.params.Qty = 1;
						this.nav_to('/pages/mall/paySuccess?id=' + payData.EventID)
					}
					return;
				}

				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						_this.$pv.msg('购买成功');
						_this.$refs.pay.close();
						_this.params.Qty = 1;
						_this.nav_to('/pages/mall/paySuccess?id=' + sub.data)
					},
					fail(err) {
						_this.$pv.msg('支付失败');
					},
				});
			}
		},
		async cart_add() {
			const imgList = this.restoreImg(this.details_list.Images)
			let l;
			if (Array.isArray(this.details_list.ProductStyleList) && this.details_list.ProductStyleList.length) {
				let con = this.details_list.ProductStyleList[this.checkIndex];
				l = [
					{
						productID: this.details_list.ID,
						Name: this.details_list.ProductName,
						Price: con.Price,
						score: this.totalPV,
						Style: con.Style,
						Qty: this.params.Qty,
					},
				];
			} else {
				l = [
					{
						productID: this.details_list.ID,
						Name: this.details_list.ProductName,
						Price: this.details_list.Price,
						score: this.totalPV,
						Style: this.details_list.Style,
						Qty: this.params.Qty,
					},
				];
			}
			let res = await this.$api.post('ShopCard/Add', {
				ProductStyle: this.details_list.ProductStyleList[this.checkIndex].Style,
				ProductImgs: imgList[0],
				Price: this.totalPrice,
				Score: this.totalPV,
				CouponNo: '',
				Discounts: '',
				ItemStr: JSON.stringify(l),
				ProductID: this.details_list.ID,
				ProductName: this.details_list.ProductName,
				Qty: this.params.Qty,
				Style: this.details_list.Style,
			})
			if (res.code == 0) {
				this.$pv.msg('加入成功')
			} else {
				this.$pv.msg(res.message)
			}
		},
		previewImage(current) {
			console.log(current);
			uni.previewImage({
				urls: [current],
				current,
			});
		},
		swiperChange() {
			uni.createVideoContext('video', this).pause();
		},
		async get_detail() {
			let res = await this.$api.post('/Products/Info', {
				ID: this.id,
			});
			console.log('商品详情 ', res);
			if (res.code == 0) {
				this.details_list = res.data;
				this.load = true
			}
			if (res.data.ImageList) {
				this.imgArr = res.data.ImageList.filter((item) => item.Type == 'image');
			}

			if (!this.details_list.Description) return;
			this.details_list.Description = this.formatRichText(this.details_list.Description);
		},
		formatRichText(html) {
			let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
				match = match
					.replace(/<p>/gi, '<p class="p_class">')
					.replace(/width:[^;]+;/gi, 'max-width:100%;')
					.replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<a>/gi, '<a class="p_class "');
			newContent = newContent.replace(/<li>/gi, '<li class="p_class "');
			newContent = newContent.replace(/\<p/gi, '<p class="p_class "');
			newContent = newContent.replace(/\<span/gi, '<span class="p_class "');
			newContent = newContent.replace(
				/\<img/gi,
				'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
			);
			return newContent;
		},
		itemclick(e) {
			if (e.detail.node.name == 'img') {
				let img = e.detail.node.attrs.src;
				this.SeeDatu(img);
			}
		},
		SeeDatu(imgUrl) {
			uni.previewImage({
				urls: [imgUrl],
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
			});
		},
		decreaseCount() {
			if (this.count > 0) {
				this.count--;
			} else {
				this.count = 0;
			}
		},
		increaseCount() {
			this.count++;
		},
		pledges() {
			this.$refs['hands'].open();
		},
		restoreImg(Images) {
			let str = Images || '';
			if (str.includes('.png') || str.includes('.jpg') || str.includes('.jpeg') || str.includes('.webp')) {
				let imglist = Images.split(',') || []

				return imglist
			} else {
				return []
			}

		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f1f1f1;
}

.head_img {
	width: 100%;
	height: 600rpx;
}

.goods_name {
	margin-top: -10rpx;
	border-top: 1px solid #f5f7f9;
	min-height: 100rpx;
	padding-bottom: 20rpx;
	background: #fff;
	padding-left: 24rpx;
	padding-right: 24rpx;
	// margin-top: 10rpx;
	display: flex;
	// align-items: center;
	justify-content: space-between;

	.tag {
		display: inline-block;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background: #ffebe0;
		color: #f77f41;
		line-height: 1.6;
		border-radius: 4rpx;
		font-size: 28rpx;

		text {
			color: #f00;
			font-weight: bold;
		}
	}

	.shar {
		width: 60%;
		display: flex;
		align-items: center;
		color: #4c6a82;

		.botton_add {
			padding: 0;
			background: none;
			width: 50rpx;
			height: 50rpx;
			border: 2rpx solid #736b6b;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50rpx;
			margin: 10rpx;
		}

		.discount {
			height: 40rpx;
			background-image: linear-gradient(45deg, #9402ad, #c148f3);
			padding: 0 15rpx;
			border-radius: 10rpx;
			color: white;
			display: flex;
			align-items: center;
		}
	}

	.price2 {
		padding-top: 10rpx;
		// display: flex;
		align-items: baseline;
		color: #5a5f63;

		.now_price {
			font-size: 32rpx;
			margin-right: 20rpx;
			color: #e71b00;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
			}

			.name {
				font-size: 24rpx;
				color: #333;
			}
		}

		.now_price2 {
			font-size: 32rpx;
			margin-right: 20rpx;
			color: #9c9594;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
			}

			.name {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.price {
		padding-top: 10rpx;
		display: flex;
		align-items: baseline;
		color: #5a5f63;

		.now_price {
			font-size: 32rpx;
			margin-right: 20rpx;
			color: #e71b00;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
			}

			.name {
				font-size: 24rpx;
				color: #333;
			}
		}

		.now_price2 {
			font-size: 32rpx;
			margin-right: 20rpx;
			color: #9c9594;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
			}

			.name {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.namebox {

		// width: 40%;
		.flex {
			.btn {
				margin-left: 30rpx;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #ffcbcb;
				font-size: 28rpx;
				color: #fff;
				border-radius: 28rpx;
				text-align: center;
			}

			.name {
				//width: 500rpx;
				font-size: 32rpx;
				color: #333;
				line-height: 50rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}
		}
	}
}

.box3 {
	.tit {
		font-size: 32rpx;
		padding-left: 10px;
		margin: 10rpx 0;
		margin-bottom: 0;
		line-height: 70rpx;
		background-color: white;
		color: #000;
	}

	.content {
		border-top: 2rpx solid #eee;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #333;

		>image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.null {
		width: 100%;
		height: 150rpx;
		color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.bottom {
	width: 100%;
	height: 150rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	z-index: 10;

	// justify-content: space-between;
	.moneny {
		padding: 0 24rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		color: #ff3d02;


		.textbox {
			font-size: 36rpx;
			color: #8c8c8c;

			>text {
				color: #ff3d02;
			}
		}

		.bottom_btn {
			height: 72rpx;
			width: 192rpx;
			font-size: 24rpx;
			line-height: 72rpx;
			text-align: center;
			background-color: #706EEE;
			border-radius: 40rpx;
			color: #fff;
		}

		.cart_btn {
			width: 80rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			margin-right: 44rpx;
			position: relative;
			margin-left: auto;

			.cart_img {
				width: 50rpx;
				height: 48rpx;
			}

			.cart_text {
				font-size: 24rpx;
			}

			.cir_icon {
				// padding: 10rpx;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: red;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				right: -8rpx;
				top: -14rpx;
			}
		}

		.integral {
			margin-top: 15rpx;
			font-size: 36rpx;
			line-height: 0rpx;
			text-align: right;
			color: #e71b00;
		}
	}
}

.store {
	background-color: white;
	padding-bottom: 40rpx;
	width: 750rpx;
	position: fixed;
	z-index: 20rpx;
	bottom: 0;
	border-radius: 32rpx 32rpx 0 0;

	.staff_card_cont {
		view {
			color: #333;
		}

		display: flex;
		justify-content: space-between;
		// height: 96rpx;
		border-bottom: 8rpx solid #f7f7f7;
		font-size: 28rpx;
		align-items: center;
		color: #181818;
		padding: 24rpx 40rpx;

		text {
			color: #000;
			font-size: 36rpx;
		}

		input {
			text-align: right;
		}

		.title {}

		.content {
			max-width: 80%;
			margin-left: 10rpx;

			text {
				color: #e71b00;
			}
		}

		.Accepter {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.content_text {
				.address {
					margin-top: 14rpx;
					font-weight: bold;
				}
			}
		}

		.countbox {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			input {
				width: 15%;
				text-align: center;
				border: 2rpx solid #eee;
				border-radius: 8rpx;
				padding: 10rpx;
				margin: 0 10rpx;
			}
		}
	}

	.staff_card_cont:first-child {
		justify-content: space-between;
		margin-right: -8rpx;
		font-size: 30rpx;
	}

	.cont_sub {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e02e24;
		margin: 0 40rpx;
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-radius: 50rpx;
		color: white;

		text {
			color: white;
			font-size: 30rpx;
		}
	}

	scroll-view {
		max-height: 50vh;

		.list-body {
			padding: 24rpx 40rpx 4rpx;
			display: flex;
			flex-wrap: wrap;

			.list-group {
				padding: 10rpx 16rpx;
				border-radius: 50rpx;
				margin: 0 20rpx 20rpx 0;
				color: #000;
				font-size: 26rpx;
				border: 4rpx solid #eee;

				text {
					color: #999;
				}
			}

			.list-active {
				border: 4rpx solid #f39931;
				color: #f39931;

				text {
					color: #f39931;
				}
			}
		}
	}
}

swiper {
	height: 600rpx;
}
</style>
